import styles from './index.module.scss'
import MainTitle from "@/components/MainTitle"
import TitleWhithLine from "@/components/TitleWhithLine";
import { Col, Row } from 'antd';
import { useNavigate } from 'react-router-dom';
// import { useRouter } from "next/router";

const Latest = () => {
	// const router = useRouter()
	const navigate = useNavigate()
	const list = [
		{
			imguRL: "https://www.cncf.io/wp-content/uploads/2024/12/Single-Template-4-34-590x310.jpg",
			title: 'Top 6 cloud computing trends for 2025',
			date: 'December 3, 2024',
		}, {
			imguRL: "https://www.cncf.io/wp-content/uploads/2024/12/Single-Template-4-34-590x310.jpg",
			title: 'Kubestronaut in Orbit: Eyal Zekaria',
			date: 'December 3, 2024',
		}, {
			imguRL: "https://www.cncf.io/wp-content/uploads/2024/12/Single-Card-35-590x310.jpg",
			title: 'AWS CloudWatch metrics explained: how to monitor and optimize your cloud resources?',
			date: 'December 2, 2024',
		}
	]
	return (
		<div className={styles.latestBox}>
			<div className={'container'}>
				<div className="flex_box flex_between align_end">
					<MainTitle title='Latest from OGA' />
					<TitleWhithLine title="LATEST NEWS" />
				</div>

				<Row gutter={40} align="stretch" style={{ marginTop: "60px" }}>
					{list.map((item, index) => {
						return <Col span={8} key={index + "_latest"}>
							<div className={styles.tabBox} onClick={() => {
								navigate("/second")
							}}>
								<img src={item.imguRL} />
								<p >
									{item.title}
								</p>
								<div className={styles.dateBox}>
									{item.date}
								</div>

							</div>
						</Col>
					})}
				</Row>

			</div>
		</div>

	)
}
export default Latest;